<template>
  <div class="category">
    <div class="category_title">栏目管理</div>
    <div class="category_button">
      <el-button type="primary" id="category_add" size="small" @click="addCategory">添加</el-button>
      <el-input placeholder="请输入栏目名称" clearable id="category_input" v-model="name"></el-input>
      <el-button type="primary" id="category_search" size="small" @click="sreachCategory">查询</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="categoryData.list" style="width: 100%" id="category_table">
      <el-table-column prop="id" label="编号" min-width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="栏目名称" min-width="290" align="center"></el-table-column>
      <el-table-column prop="num" label="序号" min-width="292" align="center"></el-table-column>
      <el-table-column prop="parentId" label="父栏目" min-width="292" align="center"></el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="deleteCategory(row)">删除</el-button>
          <el-button type="text" size="small" @click="editCategory(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="category_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <!-- {{form}} -->
      <el-form :model="form" ref="ruleForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属栏目">
			<el-select v-model="form.parentId" placeholder="请选择所属栏目">
				<el-option v-for="item in categoryName" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 0,
      pageSize: 5,
      total: 10,
      name: "",
      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        num: "",
        parentId: "",
      },
      title: "添加栏目信息"
    };
  },
  created() {
    this.loadCategorys();
  },
  computed: {
    ...mapState("category", ["categoryData","categoryName"])
  },
  methods: {
    ...mapActions("category", [
      "toLoadCategorys",
      "toSaveCategorys",
	  "toDeleteCategorys",
	  "toLoadCategoryName"
    ]),
    //加载
    loadCategorys() {
      let obj = {
        page: this.page,
        pageSize: this.pageSize
      };
      this.toLoadCategorys(obj).then(res => {
        this.total = this.categoryData.total;
	  });
	  this.toLoadCategoryName();
    },
    //分页
    handleCurrentChange(val) {
      this.page = val -1;
      this.loadCategorys();
    },
    //修改
    editCategory(row) {
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.num = row.num;
      this.form.parentId = row.parentId;
      this.title = "编辑栏目信息";
    },
    //新增
    addCategory() {
      this.dialogFormVisible = true;
      this.form = {};
	  this.title = "添加栏目信息";
    },
    //保存
    saveCategory() {
      this.toSaveCategorys(this.form).then(response => {
        this.$message({ type: "success", message: "保存成功" });
        this.dialogFormVisible = false;
        this.loadCategorys();
      });
    },
    //删除
    deleteCategory(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.toDeleteCategorys(row.id).then(res => {
			if(res.data.status !== 200){
				this.$message({type: 'warning',message: '要删除的分类存在关联关系' });
			}else{
				this.$message({ type: "success", message: "删除成功" });
          		this.loadCategorys();
			}
        });
      });
    },
    //查询
    sreachCategory() {
      this.page = 0;
      let obj = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.name
      };
      this.toLoadCategorys(obj).then(response => {
        this.total = this.categoryData.total;
      });
    }
  }
};
</script>
<style scope>
.category {
  padding: 10px;
}
.category_title {
  border-bottom: 1px solid #ccc;
  height: 35px;
  line-height: 35px;
}
.category_button {
  margin-top: 10px;
  position: relative;
}
.category_button > * {
  display: inline-block !important;
}
#category_input {
  position: absolute;
  top: -50px;
  left: 94px;
  width: 200px;
}
#category_search {
  position: absolute;
  top: 1px;
  left: 304px;
}
.category_page {
  margin-top: 10px;
}
</style>